<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">个人中心</h1>
      <p class="page-desc">管理您的个人信息、安全设置与操作记录</p>
    </div>

    <el-row :gutter="24" class="page-content">
      <!-- 左侧个人信息卡片 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" class="profile-card-col">
        <el-card class="profile-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="card-title">个人信息</span>
          </div>

          <!-- 头像区域（增加悬停动效） -->
          <div class="avatar-container">
            <div class="el-upload avatar-uploader">
              <img
                :src="localUser.avatarName ? baseApi + '/avatar/' + localUser.avatarName : Avatar"
                class="avatar-img"
              >
            </div>
          </div>

          <!-- 个人信息列表（优化间距与视觉层次） -->
          <ul class="user-info-list">
            <li class="info-item">
              <svg-icon icon-class="login" class="info-icon" />
              <span class="info-label">登录账号</span>
              <span class="info-value">{{ localUser.username || '暂无数据' }}</span>
            </li>
            <li class="info-item">
              <svg-icon icon-class="user1" class="info-icon" />
              <span class="info-label">用户昵称</span>
              <span class="info-value">{{ localUser.nickName || '暂无数据' }}</span>
            </li>
            <li class="info-item">
              <svg-icon icon-class="dept" class="info-icon" />
              <span class="info-label">所属部门</span>
              <span class="info-value">{{ localUser.nodeDept || '暂无数据' }}</span>
            </li>
            <li class="info-item">
              <svg-icon icon-class="phone" class="info-icon" />
              <span class="info-label">手机号码</span>
              <span class="info-value">{{ localUser.phone || '暂无数据' }}</span>
            </li>
            <li class="info-item">
              <svg-icon icon-class="email" class="info-icon" />
              <span class="info-label">用户邮箱</span>
              <span class="info-value">{{ localUser.email || '暂无数据' }}</span>
            </li>
            <li class="info-item security-item">
              <svg-icon icon-class="anq" class="info-icon" />
              <span class="info-label">安全设置</span>
              <div class="info-value security-actions">
                <a class="action-link" @click="$refs.pass.dialog = true">
                  修改密码
                  <i class="el-icon-right" />
                </a>
                <!-- <a @click="$refs.email.dialog = true" class="action-link">
                  修改邮箱
                  <i class="el-icon-right"></i>
                </a> -->
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>

      <!-- 右侧内容区域 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19" class="main-content-col">
        <!-- 内容卡片（统一阴影与圆角） -->
        <el-card class="main-content-card" shadow="hover">
          <!-- 选项卡（优化样式与交互） -->
          <el-tabs
            v-model="activeName"
            class="custom-tabs"
            tab-position="top"
            :before-leave="handleTabLeave"
            @tab-click="handleClick"
          >
            <el-tab-pane label="用户资料" name="first" class="tab-pane">
              <div class="tab-content">
                <el-form
                  ref="form"
                  :model="form"
                  :rules="rules"
                  class="user-form"
                  size="small"
                  label-width="100px"
                >
                  <!-- 基础信息区域 -->
                  <div class="form-section">
                    <h3 class="section-title">
                      <i class="el-icon-user" />
                      基础信息
                    </h3>
                    <el-row :gutter="24" class="form-row">
                      <el-col :span="12" class="form-col">
                        <el-form-item label="昵称" prop="nickName" class="form-item">
                          <el-input
                            v-model="form.nickName"
                            placeholder="请输入用户昵称"
                            class="custom-input"
                            :class="{ 'input-focus': isInputFocus('nickName') }"
                            @focus="setInputFocus('nickName')"
                            @blur="clearInputFocus('nickName')"
                          />
                          <div v-if="checkData.nickName" class="form-tip">用户昵称不作为登录使用</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="form-col">
                        <el-form-item label="手机号" prop="phone" class="form-item">
                          <el-input
                            v-model="form.phone"
                            placeholder="请输入手机号码"
                            class="custom-input"
                            :class="{ 'input-focus': isInputFocus('phone') }"
                            @focus="setInputFocus('phone')"
                            @blur="clearInputFocus('phone')"
                          />
                          <div v-if="checkData.phone" class="form-tip">手机号码不能重复</div>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-row">
                      <el-col :span="12" class="form-col">
                        <el-form-item label="性别" class="form-item">
                          <el-radio-group v-model="form.gender" class="gender-group">
                            <el-radio label="男" class="custom-radio">
                              <span class="radio-text">男</span>
                            </el-radio>
                            <el-radio label="女" class="custom-radio">
                              <span class="radio-text">女</span>
                            </el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="form-col">
                        <el-form-item label="邮箱" prop="email" class="form-item">
                          <el-input
                            v-model="form.email"
                            placeholder="请输入邮箱"
                            class="custom-input"
                            :class="{ 'input-focus': isInputFocus('email') }"
                            @focus="setInputFocus('email')"
                            @blur="clearInputFocus('email')"
                          />
                          <div v-if="checkData.email" class="form-tip">邮箱不能重复</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- 提交按钮区域 -->
                  <el-form-item class="submit-section form-item">
                    <div class="button-group">
                      <el-button
                        :loading="saveLoading"
                        type="primary"
                        class="submit-button"
                        @click="doSubmit"
                      >
                        <i class="el-icon-check" />
                        保存配置
                      </el-button>
                      <el-button
                        class="reset-button"
                        @click="baresetForm"
                      >
                        <i class="el-icon-refresh" />
                        重置
                      </el-button>
                    </div>
                  </el-form-item>
                  <!-- 备用手机号区域 -->
                  <div class="form-section">
                    <h3 class="section-title">
                      <i class="el-icon-phone" />
                      备用手机号管理
                    </h3>
                    <el-form-item class="backup-phone-section form-item">
                      <!-- 使用新的备用手机号组件（增加容器样式） -->
                      <div class="backup-phone-container">
                        <GerenZhoxian />
                      </div>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
            </el-tab-pane>

            <!-- 操作日志选项卡 -->
            <el-tab-pane label="操作日志" name="second" class="tab-pane">
              <div class="tab-content">
                <!-- 日志筛选栏 -->
                <div class="log-filter-bar">
                  <div class="filter-left">
                    <span class="filter-title">操作记录</span>
                  </div>
                  <div class="filter-right">
                    <el-button
                      type="text"
                      class="refresh-button"
                      :loading="refreshLoading"
                      @click="init"
                    >
                      <i class="el-icon-refresh" />
                      刷新
                    </el-button>
                  </div>
                </div>

                <!-- 日志表格 -->
                <el-table
                  v-loading="loading"
                  :data="data"
                  style="width: 100%;"
                  class="log-table"
                  :row-class-name="tableRowClassName"
                  border
                  stripe
                >
                  <el-table-column
                    prop="description"
                    label="行为"
                    min-width="180"
                    class-name="table-column"
                  />
                  <el-table-column
                    prop="requestIp"
                    label="IP"
                    width="140"
                    class-name="table-column"
                  />
                  <el-table-column
                    :show-overflow-tooltip="true"
                    prop="address"
                    label="IP来源"
                    min-width="160"
                    class-name="table-column"
                  />
                  <el-table-column
                    prop="browser"
                    label="浏览器"
                    width="180"
                    class-name="table-column"
                  />
                  <el-table-column
                    prop="time"
                    label="请求耗时"
                    align="center"
                    width="140"
                    class-name="table-column"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        :class="{
                          'time-tag-fast': scope.row.time <= 300,
                          'time-tag-normal': scope.row.time > 300 && scope.row.time <= 1000,
                          'time-tag-slow': scope.row.time > 1000
                        }"
                      >
                        {{ scope.row.time }}ms
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="创建日期"
                    align="right"
                    width="180"
                    class-name="table-column"
                  />
                </el-table>

                <!-- 分页组件（优化样式与位置） -->
                <div class="pagination-container">
                  <el-pagination
                    :total="total"
                    :current-page="page + 1"
                    :page-sizes="[10, 20, 30, 50]"
                    style="margin-top: 16px;"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="custom-pagination"
                    @size-change="sizeChange"
                    @current-change="pageChange"
                  />
                </div>
              </div>
            </el-tab-pane>

            <!-- 我的资源选项卡 -->
            <el-tab-pane label="我的资源" name="IdeZiYuan" class="tab-pane">
              <div class="tab-content resource-content">
                <applications />
              </div>
            </el-tab-pane>

            <!-- App Key 管理选项卡 -->
            <el-tab-pane label="App Key 管理" name="APPkey" class="tab-pane">
              <div class="tab-content appkey-content">
                <AppKey :load-trigger="appKeyTabLoaded" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗组件 -->
    <updateEmail ref="email" :email="user.email" @editEmail="editEmail" />
    <updatePass ref="pass" />
  </div>
</template>

<script>
// import myUpload from 'vue-image-crop-upload'
import { mapGetters } from 'vuex'
import updatePass from './center/updatePass'
import updateEmail from './center/updateEmail'
import GerenZhoxian from './center/gerenzhoxian.vue'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { isvalidPhone } from '@/utils/validate'
import crud from '@/mixins/crud'
import { editUser } from '@/api/system/user'
import Avatar from '@/assets/images/avatar.png'
import AppKey from '@/views/system/user/center/AppKey.vue'
import applications from '@/views/system/user/center/applications.vue'
import { getInfoi } from '@/api/xwZx'

export default {
  name: 'Center',
  components: { updatePass, updateEmail, GerenZhoxian, AppKey, applications },
  mixins: [crud],
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }

    return {
      appKeyTabLoaded: false, // 关键：控制AppKey组件是否加载接口
      Avatar: Avatar,
      activeName: 'first',
      saveLoading: false,
      loading: false,
      refreshLoading: false,
      inputFocus: {}, // 记录输入框焦点状态
      headers: {
        'Authorization': getToken()
      },
      form: {},
      rules: {
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
          }
        ]
      },
      localUser: {
        username: '',
        nickName: '',
        deptName: '',
        phone: '',
        email: ''
      },
      checkData: {
        nickName: true,
        phone: true,
        email: true
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'updateAvatarApi',
      'baseApi'
    ])
  },
  watch: {
    'form.nickName'(n, o) {
      console.log('11111', n)
      this.$nextTick(() => {
        this.$refs.form.validateField('nickName', (errorMessage) => {
          if (!errorMessage) {
            // 验证通过
            this.checkData.nickName = false
          } else {
            // 验证失败（errorMessage 为错误信息）
            this.checkData.nickName = true
          }
        })
      })
    },
    'form.phone'(n, o) {
      console.log('11111', n)
      this.$nextTick(() => {
        this.$refs.form.validateField('phone', (errorMessage) => {
          if (!errorMessage) {
            // 验证通过
            this.checkData.phone = false
          } else {
            // 验证失败（errorMessage 为错误信息）
            this.checkData.phone = true
          }
        })
      })
    },
    'form.email'(n, o) {
      console.log('11111', n)
      this.$nextTick(() => {
        this.$refs.form.validateField('email', (errorMessage) => {
          if (!errorMessage) {
            // 验证通过
            this.checkData.email = false
          } else {
            // 验证失败（errorMessage 为错误信息）
            this.checkData.email = true
          }
        })
      })
    }

  },
  created() {
    this.getLeftInfo()
  },
  methods: {
    // 输入框焦点管理
    setInputFocus(field) {
      this.$set(this.inputFocus, field, true)
    },
    clearInputFocus(field) {
      this.$set(this.inputFocus, field, false)
    },
    isInputFocus(field) {
      return this.inputFocus[field] || false
    },

    // 选项卡切换前处理
    handleTabLeave(activeName, oldActiveName) {
      // 可添加表单验证提示等逻辑
      if (oldActiveName === 'first' && this.$refs['form']) {
        this.$refs['form'].clearValidate()
        this.inputFocus = {} // 清除所有输入框焦点状态
      }
    },

    // 表格行样式
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd'
    },

    // 编辑邮箱回调
    editEmail() {
      this.getLeftInfo()
      this.$message.success('邮箱修改成功')
    },

    // 获取个人信息
    getLeftInfo() {
      this.loading = true
      getInfoi().then((res) => {
        const updatedUser = res
        this.localUser = updatedUser
        this.form = {
          id: updatedUser.id || '',
          nickName: updatedUser.nickName || '',
          gender: updatedUser.gender || '',
          phone: updatedUser.phone || '',
          email: updatedUser.email || ''
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 选项卡点击事件
    handleClick(tab, event) {
      console.log(tab, 'tab')
      if (tab.name === 'second') {
        this.refreshLoading = true
        this.init().finally(() => {
          this.refreshLoading = false
        })
      }
      // 新增：App Key 管理选项卡逻辑
      if (tab.name === 'APPkey') {
        this.appKeyTabLoaded = false // 先重置为false
        this.$nextTick(() => { // 下一帧再设为true，触发watch变化
          this.appKeyTabLoaded = true
        })
      }
    },

    // 初始化日志数据
    beforeInit() {
      this.url = 'api/logs/user'
      return true
    },

    // 提交表单
    doSubmit() {
      if (this.$refs['form']) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.saveLoading = true
            editUser(this.form).then(() => {
              this.$message.success('个人信息修改成功')
              store.dispatch('GetInfo').then(() => { })
              this.saveLoading = false
              this.getLeftInfo()
            }).catch(() => {
              this.saveLoading = false
              this.$message.error('个人信息修改失败，请重试')
            })
          }
        })
      }
    },

    // 重置表单
    baresetForm() {
      // 重置表单到初始状态
      const safeUser = this.localUser || {}
      this.form = {
        id: safeUser.id || '',
        nickName: safeUser.nickName || '',
        gender: safeUser.gender || '',
        phone: safeUser.phone || '',
        email: safeUser.email || ''
      }

      // 清除表单验证和输入框焦点
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate()
      }
      this.inputFocus = {}

      this.$message.success('表单已重置')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 全局样式变量
$primary-color: #409EFF;
$primary-light: #E6F7FF;
$primary-hover: #66B1FF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$text-primary: #303133;
$text-secondary: #606266;
$text-placeholder: #909399;
$border-color: #E4E7ED;
$bg-light: #F5F7FA;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
$shadow-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
$transition-base: all 0.3s ease;

// 页面容器
.app-container {
  padding: 24px;
  background-color: $bg-light;
  min-height: 100vh;
}

// 页面标题
.page-header {
  margin-bottom: 24px;
  .page-title {
    font-size: 20px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 8px;
  }
  .page-desc {
    font-size: 14px;
    color: $text-secondary;
  }
}

// 页面内容布局
.page-content {
  margin-bottom: 24px;
}

// 左侧个人信息卡片
.profile-card-col {
  .profile-card {
    border-radius: 12px;
    overflow: hidden;
    transition: $transition-base;
    &:hover {
      box-shadow: $shadow-hover;
    }

    .card-header {
      padding: 4px 20px;
      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: $text-primary;
      }
    }

    // 头像容器
    .avatar-container {
      padding: 24px 0;
      display: flex;
      justify-content: center;
      position: relative;

      .avatar-uploader {
        position: relative;
        cursor: pointer;
      }

      .avatar-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: $transition-base;
        cursor: default;
      }

      // 头像悬停效果
      .avatar-hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }

      // 头像遮罩
      .avatar-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: $transition-base;
        cursor: pointer;

        .el-icon-camera {
          font-size: 20px;
          margin-bottom: 4px;
        }

        .mask-text {
          font-size: 12px;
        }
      }

      .avatar-uploader:hover .avatar-mask {
        opacity: 1;
      }
    }

    // 个人信息列表
    .user-info-list {
      padding: 0 20px 20px;
      list-style: none;

      .info-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid $border-color;
        font-size: 14px;
        transition: $transition-base;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background-color: $primary-light;
          padding-left: 4px;
          border-radius: 4px;
        }

        .info-icon {
          color: $primary-color;
          font-size: 16px;
          margin-right: 12px;
          width: 20px;
          text-align: center;
        }

        .info-label {
          color: $text-secondary;
          width: 80px;
          flex-shrink: 0;
        }

        .info-value {
          color: $text-primary;
          flex-grow: 1;
          text-align: right;
        }

        // 安全设置项
        &.security-item {
          .security-actions {
            .action-link {
              color: $primary-color;
              margin-left: 16px;
              transition: $transition-base;
              display: inline-flex;
              align-items: center;

              &:hover {
                color: $primary-hover;
                text-decoration: underline;
              }

              .el-icon-right {
                font-size: 12px;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
  }
}

// 右侧主内容区域
.main-content-col {
  .main-content-card {
    border-radius: 12px;
    overflow: hidden;
    transition: $transition-base;
    &:hover {
      box-shadow: $shadow-hover;
    }

    // 自定义选项卡
    .custom-tabs {
      .el-tabs__header {
        padding: 0 20px;
        margin-bottom: 0;
        border-bottom: 1px solid $border-color;

        .el-tabs__nav {
          height: 56px;

          .el-tabs__item {
            height: 56px;
            line-height: 56px;
            font-size: 15px;
            color: $text-secondary;
            margin-right: 24px;
            padding: 0;
            transition: $transition-base;

            &:hover {
              color: $primary-color;
            }

            &.is-active {
              color: $primary-color;
              font-weight: 500;
              border-bottom: 3px solid $primary-color;
            }
          }

          .el-tabs__active-bar {
            display: none; // 隐藏默认下划线，使用自定义边框
          }
        }
      }

      // 选项卡内容区
      .tab-pane {
        .tab-content {
          padding: 24px;
        }
      }
    }

    // 用户表单样式
    .user-form {
      .form-section {
        margin-bottom: 32px;
        .section-title {
          font-size: 16px;
          font-weight: 500;
          color: $text-primary;
          margin-bottom: 16px;
          display: flex;
          align-items: center;

          .el-icon-user, .el-icon-phone {
            color: $primary-color;
            margin-right: 8px;
            font-size: 18px;
          }
        }

        .form-row {
          margin-bottom: 24px;
        }

        .form-col {
          .form-item {
            margin-bottom: 0;

            .custom-input {
              border-radius: 6px;
              border-color: $border-color;
              transition: $transition-base;

              &:focus {
                border-color: $primary-color;
                box-shadow: 0 0 0 2px $primary-light;
              }
            }

            .input-focus {
              border-color: $primary-color;
            }

            .form-tip {
              font-size: 12px;
              color: $text-placeholder;
              margin-top: 6px;
              line-height: 1.5;
              color: #ff4949;
            }

            .gender-group {
              .custom-radio {
                margin-right: 24px;
                font-size: 14px;
                color: $text-secondary;
                transition: $transition-base;

                &:hover {
                  color: $primary-color;
                }

                .el-radio__input.is-checked .el-radio__inner {
                  border-color: $primary-color;
                  background-color: $primary-color;
                }

                .el-radio__input.is-checked + .radio-text {
                  color: $primary-color;
                  font-weight: 500;
                }

                .radio-text {
                  margin-left: 6px;
                }
              }
            }

            .backup-phone-container {
              padding: 12px;
              background-color: #fff;
              border-radius: 6px;
              border: 1px solid $border-color;
            }

            .submit-section {
              .button-group {
                //display: flex;
                //justify-content: center;
                //gap: 16px;
                .submit-button {
                  padding: 10px 32px;
                  border-radius: 6px;
                  font-size: 14px;
                  background-color: $primary-color;
                  border-color: $primary-color;
                  transition: $transition-base;

                  &:hover {
                    background-color: $primary-hover;
                    border-color: $primary-hover;
                  }

                  .el-icon-check {
                    margin-right: 8px;
                  }
                }

                .reset-button {
                  padding: 10px 32px;
                  border-radius: 6px;
                  font-size: 14px;
                  color: $text-secondary;
                  border-color: $border-color;
                  transition: $transition-base;

                  &:hover {
                    color: $primary-color;
                    border-color: $primary-color;
                    background-color: $primary-light;
                  }

                  .el-icon-refresh {
                    margin-right: 8px;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 操作日志样式
    .log-filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid $border-color;

      .filter-left {
        .filter-title {
          font-size: 16px;
          font-weight: 500;
          color: $text-primary;
        }
      }

      .filter-right {
        .refresh-button {
          color: $primary-color;
          font-size: 14px;
          transition: $transition-base;

          &:hover {
            color: $primary-hover;
            background-color: $primary-light;
          }

          .el-icon-refresh {
            margin-right: 4px;
          }
        }
      }
    }

    .log-table {
      border-radius: 6px;
      overflow: hidden;

      .el-table__header th {
        background-color: $bg-light;
        font-weight: 500;
        color: $text-secondary;
        font-size: 14px;
        border-bottom: 1px solid $border-color;
      }

      .el-table__body td {
        font-size: 13px;
        color: $text-primary;
        border-bottom: 1px solid $border-color;
      }

      .table-row-even {
        background-color: #fff;
      }

      .table-row-odd {
        background-color: $bg-light;
      }

      .table-column {
        &.el-table-column--selection {
          width: 50px;
        }
      }

      // 耗时标签样式
      .time-tag-fast {
        background-color: $primary-light;
        color: $primary-color;
        border-color: $primary-light;
      }

      .time-tag-normal {
        background-color: #FFF7E6;
        color: $warning-color;
        border-color: #FFF7E6;
      }

      .time-tag-slow {
        background-color: #FFECEC;
        color: $danger-color;
        border-color: #FFECEC;
      }
    }

    // 分页样式
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 24px;

      .custom-pagination {
        .el-pagination__total {
          color: $text-secondary;
          font-size: 13px;
        }

        .el-pagination__sizes {
          margin: 0 16px;
        }

        .el-select .el-input {
          width: 100px;
        }

        .el-pagination__prev,
        .el-pagination__next,
        .el-pagination__number {
          border-radius: 4px;
          transition: $transition-base;

          &:hover {
            color: $primary-color;
            border-color: $primary-color;
          }
        }

        .el-pagination__number.is-active {
          background-color: $primary-color;
          border-color: $primary-color;
          color: #fff;
        }
      }
    }

    // 资源和AppKey内容区
    .resource-content,
    .appkey-content {
      min-height: 400px;
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .app-container {
    padding: 16px;
  }

  .main-content-col .main-content-card .custom-tabs .tab-pane .tab-content {
    padding: 16px;
  }
}

@media (max-width: 992px) {
  .user-form .form-row .form-col {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .user-form .form-row {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .page-header {
    .page-title {
      font-size: 18px;
    }
  }

  .profile-card-col .profile-card .user-info-list .info-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;

    .info-icon {
      margin-bottom: 4px;
    }

    .info-label {
      width: 100%;
      margin-bottom: 4px;
    }

    .info-value {
      text-align: left;
      width: 100%;
    }

    .security-actions {
      display: flex;
      gap: 16px;
      margin-top: 4px;
    }
  }

  .main-content-col .main-content-card .custom-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
    font-size: 13px;
    margin-right: 16px;
  }

  .log-table .el-table__body td {
    font-size: 12px;
  }

  .pagination-container .custom-pagination {
    .el-pagination__total,
    .el-pagination__sizes {
      display: none;
    }
  }
}
</style>
